<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="box-card mt-3">
    <el-table
      :data="rightsDataList"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" label="#" />
      <el-table-column prop="authName" label="权限名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="level" label="权限等级" />
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed } from 'vue'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import { rightsListType } from '@/store/storeType'
import { useStore } from '@/store'

const contentList: contentType[] = ['首页', '权限管理', '权限列表']

export default defineComponent({
  name: 'HomeRightsToList',
  components: {
    XBreadcrumb
  },
  setup () {
    const store = useStore()
    onMounted(() => {
      if (store.state.rightsModule.rightsList.length === 0) {
        store.dispatch('rightsModule/getRightsList')
      }
    })
    const rightsDataList = computed<rightsListType[]>(() => store.state.rightsModule.rightsList)
    return { rightsDataList, contentList }
  }
})
</script>
